import React, {Component} from 'react'
import {
  Form,
  Icon,
  Input,
  Button,
  message
} from 'antd'
import {Redirect} from 'react-router-dom'

import './login.less'
import logo from '../../assets/images/logo.png'
import {reqLogin} from '../../api'
import memoryUtils from '../../utils/memory_utils'
import storageUtils from '../../utils/storage_utils'
import { validator } from '../../utils/validator_utils'

const Item = Form.Item // 不能写在 import 之前

// 登录的路由组件
class Login extends Component {
  /*
  * 收集表单提交的数据
  * */
  handleSubmit = e => {
    // 阻止表单的默认行为
    e.preventDefault()

    // 对所有表单字段进行校验
    this.props.form.validateFields(async (err, values) => {
      // 校验成功
      if (!err) {
        // 在此提交 ajax 请求
        // console.log('Received values of form: ', values)
        // 请求登录
        const { username, password } = values
        const result = await reqLogin(username, password) // { status: 0, data: user } { status: 1, msg: 'xxx'}
        if (result.status === 0) { // 登录成功
          // 提示登录成功
          message.success('登录成功')

          // 保存 user
          const user = result.data
          memoryUtils.user = user // 保存在内存中
          storageUtils.saveUser(user) // 保存到本地中

          // 跳转到后台管理界面 (不需要回退到登录)
          this.props.history.replace('/')
        } else { // 登录失败
          // 提示错误信息
          message.error(result.msg)
        }
      }
    })
  }

  /*
  * 对密码进行自定义验证
  * */
  validatorPwd = (rule, value, callback) => {
    validator(rule, value, callback, '密码')
  }

  validatorName = (rule, value, callback) => {
    validator(rule, value, callback, '用户名')
  }

  render () {
    // 如果用户已经登录, 自动跳转到管理界面
    const user = memoryUtils.user
    if (user && user._id) {
      return <Redirect to='/' />
    }

    // 得到 form 对象
    const { getFieldDecorator } = this.props.form
    return (
      <div className='login'>
        <header className='login-header'>
          <img src={logo} alt="logo"/>
          <h2>React项目: 后台管理系统</h2>
        </header>
        <section className='login-content'>
          <h2>用户登录</h2>
          <Form onSubmit={this.handleSubmit} className="login-form">
            {/*
              用户名 / 密码的的合法性要求
                1). 必须输入
                2). 必须大于等于 4 位
                3). 必须小于等于 12 位
                4). 必须是英文、数字或下划线组成
            */}
            <Item>
              {
                getFieldDecorator('username', {
                  // 声明式验证
                  rules: [
                    { validator: this.validatorName }
                  ],
                  initialValue: 'admin'
                })(
                  <Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="username"
                    allowClear={true}
                  />
                )
              }
            </Item>
            <Item>
              {
                getFieldDecorator('password', {
                  rules: [
                    { validator: this.validatorPwd }
                  ]
                })(
                  <Input
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    type="password"
                    placeholder="password"
                    allowClear={true}
                  />
                )
              }
            </Item>
            <Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Item>
          </Form>
        </section>
      </div>
    )
  }
}

const WrapLogin = Form.create()(Login)
export default WrapLogin
